import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { darken } from '../../theme/tools';

export const toolbarButtonStyle = style({
	display: 'inline-flex',
	alignItems: 'center',
	cursor: 'default',
	height: '2.6em',
	minWidth: '2.6em',
	padding: '0 0.5em',
	justifyContent: 'center',
	color: vars.color.text,
	border: 'none',
	margin: '0',
	background: 'none',
	selectors: {
		'&:hover': {
			backgroundColor: darken(vars.color.windowBackground),
		},
		'&.checked': {
			boxShadow: `inset 0 2px 4px ${vars.color.shadow}, inset 0 -2px 4px ${vars.color.shadow}`,
			backgroundColor: darken(vars.color.windowBackground, 0.2),
		},
		'&.disabled': {
			pointerEvents: 'none',
			color: vars.color.disabledText,
		},
	},
});

globalStyle(`${toolbarButtonStyle} svg`, {
	fill: vars.color.text,
	width: '1.4em',
	height: '1.4em',
});

globalStyle(`${toolbarButtonStyle} svg.icon:not(:last-child)`, {
	marginRight: '0.2em',
});

globalStyle(`${toolbarButtonStyle}.disabled svg`, {
	fill: vars.color.disabledText,
});
